<template>
    <Modal v-model:visible="isShowModal" :title="`${editId ? '编辑' : '新增'}场景`" @ok="handleOk" ok-text="提交"
        cancel-text="取消" :closable="false" :loading="loading" :width="680">
        <Form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <FormItem label="场景名称">
                <Input v-model:value="formState.name" placeholder="请输入模板名称" style="width: 300px;"></Input>
            </FormItem>
            <FormItem label="C端别名">
                <Input v-model:value="formState.nameByMember" placeholder="用于求职者期望条件标题,为空取场景名称"
                    style="width: 300px;"></Input>
            </FormItem>
            <FormItem label="B端别名">
                <Input v-model:value="formState.nameByCompany" placeholder="用于企业知识库条件标题,为空取场景名称"
                    style="width: 300px;"></Input>
            </FormItem>
            <FormItem label="所属模块">
                <Select v-model:value="formState.module" style="width: 300px" placeholder="请选择所属模块"
                    :options="templateModuleOption">
                </Select>
            </FormItem>
            <FormItem label="场景问题">
                <Textarea v-model:value="formState.question" placeholder="请输入场景问题" :rows="4"></Textarea>
            </FormItem>
            <FormItem label="场景条件">
                <RadioGroup v-model:value="formState.extendType">
                    <Radio v-for="item in sceneExtendType" :value="item.value">{{ item.label }}</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="场景选项">
                <div class="flex flex-col gap-3">
                    <div class="flex flex-row items-center gap-x-4" v-for="(item, index) in extendParams"
                        :draggable="isSort" @dragenter="dragenter($event, index)" @dragover="dragover($event)"
                        @dragstart="dragstart(index)" @dragend="dragEnd($event)">
                        <HolderOutlined class="!text-xl !flex !cursor-pointer" @mouseenter="isSort = true;"
                            @mouseleave="isSort = false" />
                        <Input v-model:value="extendParams[index]" placeholder="请输入场景选项"></Input>
                        <PlusCircleOutlined class="!text-lg !text-[#999]" @click="handleAdd(index)" />
                        <MinusCircleOutlined class="!text-lg !text-[#999]" @click="handleDel(index)" />
                    </div>
                </div>
            </FormItem>
        </Form>
    </Modal>
</template>

<script lang="ts" setup>
import { Modal, Form, Input, message, Select, Textarea, Radio, RadioGroup } from 'ant-design-vue'
import { KnowledgeTemplateApi, JobType, KnowledgeTemplateDetailEditRequest, KnowledgeTemplateDetailResult } from '@/api';
import { templateModuleOption, sceneExtendType } from './index'
import { PlusCircleOutlined, MinusCircleOutlined, HolderOutlined } from "@ant-design/icons-vue";

const FormItem = Form.Item;

const emit = defineEmits(['ok']);
const props = defineProps<{ position?: JobType[] }>()

const isShowModal = ref(false)
const loading = ref(false)
const modelOption = ref<JobType[]>(props.position || [])
const editId = ref('')
const formState = ref<KnowledgeTemplateDetailEditRequest>({});
const extendParams = ref([''])

watch(() => props.position,
    val => {
        modelOption.value = val || [];
    })

const handleOpen = (data: KnowledgeTemplateDetailResult, id: number) => {
    if (data) {
        editId.value = data.id!.toString();
        formState.value = {
            knowledgeTemplateId: data.knowledgeTemplateId,
            module: data.module,
            name: data.name,
            nameByCompany: data.nameByCompany,
            nameByMember: data.nameByMember,
            question: data.question,
            extend: data.extend,
            extendType: data.extendType,
            weight: data.weight,
        };
        extendParams.value = JSON.parse(data.extend!);
    } else {
        handleEmpty();
        formState.value = {
            knowledgeTemplateId: id,
        }
    }
    isShowModal.value = true;
}

const handleOk = async () => {
    loading.value = true;
    try {
        formState.value.extend = JSON.stringify(extendParams.value)
        if (editId.value) {
            await KnowledgeTemplateApi.knowledgetemplateDetailedit(editId.value, formState.value);
            message.success('编辑成功')
        } else {
            await KnowledgeTemplateApi.knowledgetemplateDetailadd(formState.value)
            message.success('添加成功')
        }
        emit('ok')
        handleClose();
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}

const handleEmpty = () => {
    formState.value = {};
    extendParams.value = [''];
    editId.value = '';
}

function handleClose() {
    isShowModal.value = false;
}

function handleAdd(index: number) {
    extendParams.value.splice(index + 1, 0, '')
}
function handleDel(index: number) {
    extendParams.value.splice(index, 1)
}

// 场景排序
const isSort = ref(false)
const dragIndex = ref<number>(0);
function dragstart(index: number) {
    dragIndex.value = index;
}
function dragenter(e: Event, index: number) {
    e.preventDefault();
    if (dragIndex.value !== index) {
        if (extendParams.value.length) {
            const source = extendParams.value[dragIndex.value];
            extendParams.value.splice(dragIndex.value, 1);
            extendParams.value.splice(index, 0, source);
        }
        dragIndex.value = index;
    }
}
async function dragover(e: Event) {
    e.preventDefault();
}

async function dragEnd(e: Event) {
    e.preventDefault();
}

defineExpose({ handleOpen })
</script>